{extend name="base"}

{block name="main"}
<div id="app" v-cloak>
    <el-row class="ws-quote">
        <el-button type="primary" size="small" @click="href('{:url('index')}')">前往任务列表</el-button>
    </el-row>
    <el-row class="p_y20">
        <el-col :span="12" :offset="2">
            <el-form ref="form" :model="data" :rules="rules" label-width="80px">
                <el-form-item label="任务标题" prop="title">
                    <el-input v-model="data.title" placeholder="任务标题"></el-input>
                </el-form-item>
                <el-form-item label="任务标签" prop="tag">
                    <el-checkbox-group v-model="data.tag">
                        <el-checkbox :label="i.id.toString()" v-for="i in tags">{{i.name}}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="奖励类型" prop="type">
                    <el-radio-group v-model="data.type">
                        <el-radio :label="1">金钱</el-radio>
                        <el-radio :label="2">微豆</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="奖励数量" prop="reward">
                    <el-input-number v-model="data.reward" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="任务总数" prop="number">
                    <el-input-number v-model="data.number" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="可领次数">
                    <el-input-number v-model="data.limit" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="任务期限" prop="range">
                    <el-date-picker
                          v-model="data.range"
                          type="daterange"
                          align="right"
                          unlink-panels
                          value-format="timestamp"
                          range-separator="至"
                          start-placeholder="起始时间"
                          end-placeholder="截止时间"
                          :picker-options="pickerOptions">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="审核超时">
                    <el-select v-model="data.overtime" placeholder="审核超时自动发放奖励">
                        <el-option label="24小时" :value="24"></el-option>
                        <el-option label="48小时" :value="48"></el-option>
                        <el-option label="72小时" :value="72"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态">
                    <el-radio-group v-model="data.status">
                        <el-radio :label="0">下架</el-radio>
                        <el-radio :label="1">上线</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="活动说明">
                    <el-input  type="textarea" :autosize="{ minRows: 3, maxRows: 6}" placeholder="例：两秒搞定 在线审核 超简单..." v-model="data.illustrate"></el-input>
                </el-form-item>
                
                <el-form-item>
                    <h2 v-if="steps.length">任务步骤如下：</h2>
                    <el-button type="success" size="small" @click="addStep()" v-else>
                        新增任务步骤
                    </el-button>
                </el-form-item>
                
            </el-form>
        </el-col>

    </el-row>
    <el-row>
        <el-col :span="12" :offset="2">
            <el-steps direction="vertical" :active="steps.length">
              <el-step v-for="(step,index) in steps">
                    <div slot="title">
                        {{stepName(step.type)}}
                        <el-tooltip effect="dark" content="移除当前步骤">
                            <el-button type="danger" size="mini" @click="removeStep(index)" icon="el-icon-minus" circle></el-button>
                        </el-tooltip>
                        <el-tooltip effect="dark" content="编辑该步骤类型">
                            <el-button type="success" size="mini" @click="addStep(index)" icon="el-icon-edit" circle></el-button>
                        </el-tooltip>
                        <el-tooltip effect="dark" content="添加步骤" v-if="index===steps.length-1">
                            <el-button type="success" size="mini" @click="addStep()" icon="el-icon-plus" circle></el-button>
                        </el-tooltip>
                    </div>
                    <div slot="description" style="color: #333;font-size: 14px;padding-bottom: 80px;">
                        <el-form ref="form2" :model="data" label-width="80px" label-position="top">
                            <el-form-item label="步骤说明:">
                                <el-input placeholder="当前步骤描述" v-model="step.text">
                            </el-form-item>

                            <el-form-item label="跳转链接:" v-if="step.type==1">
                                <el-input placeholder="例：http://www.veishou.com/" v-model="step.link">
                            </el-form-item>

                            <el-form-item label="示例图片:" v-if="step.type==2">
                                <el-upload
                                  action="{:url('loadStepPic')}"
                                  list-type="picture-card"
                                  :data="{index,id:data.id,type:step.type,link:step.link,text:step.text}"
                                  :file-list="step.filelist"
                                  :on-success="handleSuccess"
                                  :before-remove="beforeRemove">
                                  <i class="el-icon-plus"></i>
                                </el-upload>
                            </el-form-item>
                        </el-form>
                    </div>
              </el-step>
            </el-steps>
        </el-col>
        <el-col :span="12" :offset="3">
            <el-button type="primary" @click="onSubmit('form','{:url('addHandle')}',submitData)">提 交</el-button>
        </el-col> 
    </el-row>

    <!-- 新增编辑步骤 start -->
    <el-dialog :title="addStepTitle" width="500px" :visible.sync="addStepVisible">
        <el-radio-group v-model="addStepVal">
            <el-radio :label="i.id" v-for="i in stepsType" :disabled="i.disabled">{{i.name}}</el-radio>
        </el-radio-group>
        <div slot="footer" class="dialog-footer">
            <el-button @click="addStepVisible = false">取 消</el-button>
            <el-button type="primary" @click="addStepHandle">确 定</el-button>
        </div>
    </el-dialog>
    <!-- 新增编辑步骤 end -->

</div>
{/block}

<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>

{block name="vue"}
<script>
var app=new Vue({
    el:"#app",
    mixins:[wsMixins],
    data:{
        imagePrefix:"{:images()}",
        tags:{:json_encode(config('config.weishou_task_tags'))},
        stepsType:[
            {id:1,name:'跳转链接',disabled:false},
            {id:2,name:'图文描述',disabled:false},
            {id:3,name:'文本提交',disabled:false},
            {id:4,name:'图片提交',disabled:false},
        ],
        steps:[
            {type:1,text:'',link:'',image_group:[]},
            {type:2,text:'',link:'',image_group:[]},
            {type:4,text:'',link:'',image_group:[]},
        ],
        task:{$task|raw},
        task_step:{$task_step|raw},
        data:{},
        rules:{
            title:{required:true,message:'标题不能为空'},
            tag:{required:true,message:'请至少选择一个标签'},
            reward:{required: true,message:'任务奖励必填'},
            number:{required: true,message:'任务奖励必填'},
            illustrate:{required:true,message:'任务说明必填'},
            range:{required:true,message:'任务期限必选'},
        },
        fileList:[],

        addStepVisible:false,
        addStepVal:'',
        addStepTitle:'',
        addStepIndex:0,
    },
    created(){
        this.emptyData(this.task);
        if(this.task_step.length){
            this.steps=this.task_step;
        }
    },
    computed:{
        // 提交数据
        submitData(){
            return Object.assign(this.data,{steps:this.steps});
        }
    },
    watch:{
        addStepVisible(val){
            if(!val){
                this.addStepVal='';
                this.addStepIndex=0;
                this._setStepTypeDisabled(null,false);
            }
        }
    },
    methods: {
        emptyData(newData={}){
            this.data=Object.assign({
                title: '',
                tag: [],
                type: 1,
                status: 1,
                overtime: 24,
                reward: undefined, //任务奖励
                number: undefined, //任务总数
                limit: 1, // 用户可领次数
                illustrate: '', //任务说明
                range: [],
            },newData);
        },
        // 获取步骤名称
        stepName(type){
            let name='',
                stepsType=this.stepsType;
            for(let i of stepsType){
                if(i.id==type){
                    name=i.name;
                    break;
                }
            }
            return name;
        },
        removeStep(index){
            let steps=this.steps;
                step=this.steps[index];
            if((step&&step.text.length)||step.link.length||(step.image_group&&step.image_group.length)){
                this.$confirm('确认移除该步骤？').then(_=>{
                    let image_group=step.image_group;
                    // 应该进行步骤之前的文件的删除
                    if(image_group&&image_group.length){
                        this._wspost("{:url('delStepPic')}",{href:image_group,id:this.data.id},res=>{

                        },false)
                    }
                    this.steps.splice(index,1);
                    this.$message({type:'success',message:'移除步骤成功'})
                }).catch(err=>{})
            }else{
                this.steps.splice(index,1);
                this.$message({type:'success',message:'移除步骤成功'})
            }
        },
        _hasStepType(type){
            let steps=this.steps,
                has=false;
            if(type>0){
                for(let i of steps){
                    if(i.type==type){
                        has=true;
                        break;
                    }
                }
            }
            return has;
        },
        _setStepTypeDisabled(id,val=true){
            if(id){
                let stepsType=this.stepsType;
                for(let i of stepsType){
                    if(i.id==id){
                        i.disabled=val;
                        break;
                    }
                }
            }else{
                let stepsType=this.stepsType;
                for(let i of stepsType){
                    i.disabled=val;
                }
            }
        },
        // 新增一个步骤
        addStep(index){
            // 文本提交和图片提交仅允许一个步骤拥有
            if(this._hasStepType(3)){
                this._setStepTypeDisabled(3);
            }
            if(this._hasStepType(4)){
                this._setStepTypeDisabled(4);
            }
            if(typeof index === 'number'){
                this.addStepTitle='编辑步骤 ('+(index+1).toString()+')';
                this.addStepVal=this.steps[index].type;
                this.addStepIndex=index;
            }else{
                this.addStepTitle='新增步骤';
            }
            this.addStepVisible=true;
        },
        addStepHandle(){
            let id=this.addStepVal,
                index=this.addStepIndex;
            if(index>0){ //编辑
                let step=this.steps[index];
                if(step){
                    step.type=id;
                }
            }else{ //新增
                this.steps.push({type:id,text:'',link:'',image_group:[]});
            }
            this.addStepVisible=false;
        },
        // 图片上传结果处理
        handleSuccess(res,file,fileList){
            if(res.status===0){
                let index=res.data.index,
                    step=this.steps[index];
                file.href=res.msg;
                file._index=index;
                if(step){
                    if(step.image_group){
                        step.image_group.push(res.msg);
                    }else{
                        step.image_group=[res.msg];
                    }
                }
            }else{
                this.$message({type:'warning',message:res.msg});
            }
        },
        // 文件删除
        beforeRemove(file, fileList){
            return new Promise((resolve,reject)=>{
                this._wspost("{:url('delStepPic')}",{href:file.href,id:this.data.id},res=>{
                    if(res.code){
                        if(res.data){
                            this.task_step=res.data;
                            this.steps=res.data;
                        }else{
                            let index=file._index,
                                step=this.steps[index];
                            if(step){
                                let i=step.image_group.indexOf(file.href);
                                if(i>-1){
                                    step.image_group.splice(i,1);
                                }
                            }
                        }
                        resolve();
                    }else{
                        reject();
                    }
                },false);
            });
        },
    }
});
</script>
{/block}